<template>
    <div class="cart">
        <list-top></list-top>
        <div class="cartMain">
            <div class="mainTopBar">
                <div class="headTitle"><span class="active">我的进货单</span></div>
            </div>
            
            <div class="w-line">
                <div class="floater" style="width:100px;"></div>
            </div>
            <div class="noData" v-show="noData">
                <i class="iconfont icon-cart n-icon"></i>
                <div class="n-text">您的进货单还没有任何药品，去首页逛逛吧。</div>
                <router-link to="/" class="n-link">去首页看看</router-link>
            </div>
            <div class="carthThead">
                <div class="headItem checkAll">
                    <el-checkbox class="fl" v-model='cheackAllChecked'>全选</el-checkbox>
                </div>
                <div class="headItem goods">货名</div>
                <div class="headItem price">批发价（元）</div>
                <div class="headItem num">数量</div>
                <div class="headItem subtotal">金额（元）</div>
            </div>
            <div class="item-list">
                <div class="item-head">
                    <el-checkbox class="fl" v-model='cheackAllChecked'>桂林医药</el-checkbox>
                    <div class="callService"><span><i class="iconfont icon-duanxin"></i>联系客服</span></div>
                </div>
                <div class="item" v-for="(oitem, index) in itemList" :key="index">
                    <div class="select">
                        <el-checkbox class="fl" v-model='itemSelect'></el-checkbox>
                    </div>
                    <div class="i-goods">
                        <div class="imgBox">
                            <img src="../images/bak03.jpg" alt="">
                        </div>
                        <div class="msgBox">
                            <a href="#" class="g-name" :title="oitem.gname">{{oitem.gname}}</a>
                            <div class="g-type">类型：{{oitem.gtype}}</div>
                            <div class="g-brand">品牌 ：{{oitem.brand}}</div>
                            <div class="g-mak">生产厂家：{{oitem.gmak}}</div>
                        </div>
                    </div>
                    <div class="i-price">￥{{oitem.iprice}}</div>
                    <div class="i-num">
                        <el-input-number size="mini" v-model="oitem.num" @change="handleChange(oitem.num,index)" :min="1" :max="200" label="描述文字"></el-input-number>
                    </div>
                    <div class="i-subtotal">
                        <h5>￥{{oitem.isubtotal}}</h5>
                    </div>
                    <div class="operation">
                        <el-tooltip placement="bottom">
                            <div slot="content">收藏</div>
                            <el-button><i class="iconfont icon-bianji"></i></el-button>
                        </el-tooltip>
                        <el-tooltip placement="bottom">
                            <div slot="content">删除</div>
                            <el-button><i class="iconfont icon-shanchu"></i></el-button>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <!--/.item-list -->
            <div class="cartToolBar">
                <div class="leftBox">
                    <div class="checkAll">
                        <el-checkbox class="fl" v-model='cheackAllChecked'>全选</el-checkbox>
                    </div>
                    <div class="operation">
                        <span>删除</span>
                        <span>添加至收藏夹</span>
                    </div>
                </div>
                <div class="rightBox">
                    <span>货品种类：4 种</span>
                    <span> 数量总计: 68 件</span>
                    <span>货品金额总计（不包含运费）：<em>982.70</em>元</span>
                    <div class="settlement">立即结算</div>
                </div>
            </div>
            <!-- /.cartToolBar -->
            <div class="rcdGoods">
                <div class="rcdTopBar">
                    <div class="headTitle fl"><span class="active">推荐商品</span></div>
                    <span class="change" @click="replace"><i class="iconfont icon-huanyihuan"></i>换一换</span>
                </div>
                <div class="w-line">
                    <div class="floater"></div>
                </div>
                <div class="rcdGoodsList">
                    <div class="rcdItem" v-for="index in arr" :key="index">
                        <img :src="rcdGoodsList[index].img" alt="" class="goodsImg">
                        <a href="#" :title="rcdGoodsList[index].name" class="goodsName">{{rcdGoodsList[index].name}}</a>
                        <div class="price"><em>￥</em>{{rcdGoodsList[index].price}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import listTop from "./public/listTop.vue";
    export default {
        components: {
            listTop,
        },
        data() {
            return {
                cheackAllChecked: "", //全选状态
                itemSelect: "",
                noData: true,
                itemList: [{
                        num: 1,
                        gname: "快克复方氨酚烷胺胶囊10粒头痛鼻塞流涕发热咳嗽感冒药",
                        gtype: "感冒药物类型",
                        gbrand: "同仁药业",
                        gmak: "广东制药",
                        iprice: "20.00",
                        isubtotal: "20.00",
                    },
                    {
                        num: 2,
                        gname: "快克复方氨酚烷胺胶囊10粒头痛鼻塞流涕发热咳嗽感冒药",
                        gtype: "感冒药物类型",
                        gbrand: "同仁药业",
                        gmak: "广东制药",
                        iprice: "20.00",
                        isubtotal: "40.00",
                    }
                ],
                rcdGoodsList: [{
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "1汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "2汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "3哈哈大会片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "4第三个十多个收到公司打工",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "5汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "6汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "7汇仁 肾宝片 126片 男女肾虚亏阴阳虚",
                        price: "32.5"
                    }
                ],
                arr: [0, 1, 2, 3, 4]
            }
        },
        methods: {
            //加减商品数量
            handleChange(num, index) {
                this.itemList[index].isubtotal = num * this.itemList[index].iprice;
            },
            // 换一换
            replace() {
                var a = [];
                var j = 0;
                while (j < 5) {
                    var b = Math.floor((Math.random() * this.rcdGoodsList.length));
                    if (a.indexOf(b) == -1) {
                        a.push(b);
                        j++;
                    }
                };
                this.arr = a;
            }
        }
    }
</script>
<style lang="less">
    @import 'css/cart.less';
</style>

